var grid_store;
var win;
var grid_panel;
Ext.onReady(function() {
	var query_panel = {
		border : true,
		xtype : 'panel',
		title : "查询",
		bodyPadding : 5,
		autoWidth : true,
		autoHeight : true,
		collapsible : true,
		layout : {
			type : 'table',
			columns : 4,
			tableAttrs : {
				style : {
					width : '100%'
				}
			}
		},
		defaults : {
			labelAlign : 'right'
		},
		items : [ {
			id : 'q_id',
			xtype : 'textfield',
			fieldLabel : 'id'
		}, {
			id : 'q_name',
			xtype : 'textfield',
			fieldLabel : 'name'
		}, {
			id : 'q_age',
			xtype : 'numberfield',
			fieldLabel : 'age'
		}, {
			margin : '0 20 0 0',
			xtype : 'button',
			text : '查询',
			handler : getList
		} ]
	};

	Ext.define('grid_model', {
		extend : 'Ext.data.Model',
		fields : [ 'id', 'name', 'age' ]
	});

	var storecfg = {
		model : 'grid_model',
		proxy : {
			type : 'ajax',
			url : rootPath + '/hello/getList.do',
			reader : {
				type : 'json',
				root : 'items'
			}
		},
		autoLoad : false
	};

	grid_store = Ext.create('Ext.data.Store', storecfg);
	grid_store.on("beforeload", function(this_store, options) {
		var new_params = {
			id : Ext.getCmp('q_id').getValue(),
			name : Ext.getCmp('q_name').getValue(),
			age : Ext.getCmp('q_age').getValue()
		};
		Ext.apply(this_store.proxy.extraParams, new_params);
	});

	grid_panel = {
		id : 'grid_panel',
		border : true,
		xtype : 'grid',
		title : '列表',
		border : false,
		forceFit : false,
		autoHeight : true,
		autoWidth : true,
		store : grid_store,
		sortableColumns : false,
		collapsible : true,
		columns : [ {
			header : 'id',
			dataIndex : 'id'
		}, {
			header : 'name',
			dataIndex : 'name'
		}, {
			header : 'age',
			dataIndex : 'age'
		}

		],
		bbar : Ext.create('Ext.PagingToolbar', {
			store : grid_store,
			displayInfo : true,
			displayMsg : Ext.PagingToolbar.prototype.displayMsg
		}),
		tbar : [ {
			xtype : 'button',
			text : 'add',
			iconCls : 'add',
			handler : add
		}, {
			xtype : 'button',
			text : 'edit',
			iconCls : 'edit',
			handler : edit
		}, {
			xtype : 'button',
			text : 'delete',
			iconCls : 'delete',
			handler : deleteFun
		} ]

	};

	var main_panel = Ext.create("Ext.panel.Panel", {
		autoWidth : true,
		autoHeight : true,
		items : [ query_panel, grid_panel ],
		renderTo : 'main_div'
	});

	grid_store.loadPage(1);
});
function getList() {
	grid_store.load();
}
function add() {
	if (!win) {
		createWin();
	}
	win.setTitle('add');
	win.show();
	setWinData(null);
}
function edit() {
	var rec = Ext.getCmp('grid_panel').getSelectionModel().getSelection();

	if (rec && rec.length == 0) {
		return;
	}
	if (!win) {
		createWin();
	}
	win.setTitle('edit');
	win.show();

	setWinData(rec[0].data);
}
function createWin() {
	win = Ext.create('Ext.Window', {
		id : 'edit_win',
		height : 200,
		width : 400,
		layout : 'fit',
		modal : true,
		closable : true,
		closeAction : 'hidden',
		hidden : false,
		y : 100,
		items : [ {
			id : 'edit_form',
			xtype : 'form',
			items : [ {
				xtype : 'textfield',
				fieldLabel : 'name',
				name : 'name'
			}, {
				xtype : 'numberfield',
				fieldLabel : 'age',
				name : 'age'
			}, {
				xtype : 'hiddenfield',
				name : 'id'
			} ]
		} ],

		buttons : [ {
			text : 'submit',
			handler : save
		} ]
	});

}
function setWinData(data) {
	var fields = Ext.getCmp("edit_form").getForm().getFields();
	for ( var i = 0; i < fields.length; i++) {
		var f = fields.getAt(i);
		if (!data) {
			f.reset();
		} else {
			var v = data[f.name];
			if (v) {
				f.setValue(v);
			} else {
				f.reset();
			}
		}

	}
}
function save() {
	var form = Ext.getCmp("edit_form").getForm();
	if (form.isValid()) {

		form.submit({
			url : rootPath + '/hello/save.do',
			method : 'POST',
			params : {
				operType : win.title
			},
			success : function(form, action) {
				Ext.Msg.alert('Status', '保存成功！');
				win.hide();
				getList();
			},
			failure : function(form, action) {
				Ext.Msg.alert('Status', '保存失败！<br>');
			}
		});
	}
}
function deleteFun(){
	var rec = Ext.getCmp('grid_panel').getSelectionModel().getSelection();

	if (rec && rec.length == 0) {
		return;
	}
	console.log(rec);
	Ext.Ajax.request({
		url : rootPath + '/hello/delete.do',
		params : {
			id:rec[0].data["id"]
		},
		success : function(response) {
			var data = Ext.JSON.decode(response.responseText);
			if (data.success) {
				Ext.MessageBox.alert("操作结果", "操作成功！",function(){
					getList();
				});
			} else {
				Ext.MessageBox.alert("操作结果", "操作失败！\n"
						+ data.msg);
			}
		}
	});
}